﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>jQuery Learning</title>
    <script type="text/javascript" src="../Scripts/jquery-1.8.2.min.js"></script>
    <!--<link href="../Content/Style/custom.css" type="text/css" rel="stylesheet" />-->
    <link rel="stylesheet" type="text/css" href="../Content/Style/custom.css" />
    <script type="text/javascript">
        $(document).ready(function () {
 
            WrapEvent();
            alert("loading");
            //$("#LoadMS").load("http://www.microsoft.com/en-us/default.aspx", function () {
            //    alert("loaded");
            $("#LoadMS").attr("src", "http://www.microsoft.com/en-us/default.aspx");
            $("#LoadMS").attr("width", "1024px");
            $("#LoadMS").attr("height", "1024px");
            
            
        })
        function WrapEvent()
        {
            $("#SubmitSomething").on("click", function () {
                $("#myDiv").text("Submit button clicked");
            })

            $("#DisableEvent").on("click", function () {
                $("#SubmitSomething").off("click");
            }
            )

            $("#myDiv").on("mouseenter mouseleave mouseup", function () {
                $(this).toggleClass("highlight");
            })

            $("#LoadNewSite").click(function () {
                $("#LoadMS").attr("src", "http://www.baidu.com");
            })

            //$('label').each(function (index, element) {
            //    alert(index + '=' + $(element).attr("id"));
                
            //});
            $('table tr td').each(function () {
                   
            })
        }
    </script>
</head>
<body>

    <button id="LoadSomething">Load Something</button>
    <div id="LoadResult"></div>
    <p>Load Data fun</p>
    <a href="#" id ="loadData">Click to load data</a>
    <div id ="status"></div>
    <div id="content">
    </div>

    <form action="#" method="post" id="regform">
        <label id="NameLabel">Name</label>
        <input id="Name" type="text" name="Name"/>
        <br />
        <label id="UserNameLabel">User Name</label>
        <input id="UserName" type="text" />
        <br />
        <label id="PasswordLebel">Password</label>        
        <input id="Password" type="password" />
        <input id="SubmitButton" type="submit"  name="submit" value="submit"/>
    </form>
    <div id="myDiv">Hello</div>
    <button id="SubmitSomething">Submit Something</button>
    <button id="DisableEvent">Diable Event</button>
    <br />
    <button id="LoadNewSite">Load New</button>
    <br />
    <iframe id="LoadMS" src="#" ></iframe>

    <table>
        <tbody>
            <tr>
                <td>a</td>
                <td>b</td>
                <td>c</td>
            </tr>
           <tr>
                <td>a</td>
                <td>b</td>
                <td>c</td>
            </tr>
        </tbody>
    </table>

</body>
</html>
